<div ng-controller="DetailEvtParticipantController" style="width: 70%; margin: 0px auto 0px auto; margin-top: 30px;">
    
    <script type="text/ng-template" id="popupAnnulerParticipation.html">
        <div class = "modal-header">
            <h3 class = "modal-title"> Confirmation </h3>
        </div>
            <div class = "modal-body">
            Voulez vous vraiment annuler votre participation à l''événement ?
            </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="annulerParticipation()">Oui</button>
            <button class = "btn btn-warning" ng-click="retourParticipation()">Non</button>
        </div>
    </script>
    
    <form name="formDetailEvtParticipant" role="form">

        <div class="container-fluid panel panel-default">
            <div class="panel-heading">Détail de l'événement</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-4">
                        <strong>Type de jeu</strong> : Combat
                    </div>
                    <div class="col-md-4">
                        <strong>Nom du jeu</strong> : Soul calibur
                    </div>
                    <div class="col-md-4">
                        <strong>Support</strong> : Playstation
                    </div>
                </div>
                <br/>
                <div class="row">
                    <div class="col-md-4">
                        <strong>Nombre de participants</strong> : 3
                    </div>
                    <div class="col-md-4">
                        <strong>Adresse</strong> : 23 rue de paris 75011 Paris
                    </div>
                    <div class="col-md-4">
                        <strong>Organisateur</strong> : Pseudo de l'organisateur
                    </div>
                </div>
                <br/>
                <div class="row">
                    <div class="col-md-8">
                        <div class="form-group">
                            <strong>Détail</strong> :
                            <textarea style="width:100%; height:150px">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</textarea>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <button type="submit" ng-click="participer()" class="btn btn-primary" ng-show="participe">Participer</button>
                        <button type="submit" ng-click="afficherPopupAnnulerParticipation()" class="btn btn-warning" ng-hide="participe">Annuler participation</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">Contacter les participants</div>
            <div class="panel-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6">
                            <input type="text" class="form-control" ng-model="messageParticipants" style="width:100%" placeholder="120 caractères maximum">
                        </div>
                        <div class="col-md-6">
                            <button type="submit" ng-click="envoyerMsgOrganisateur()" class="btn btn-primary"><i class="glyphicon glyphicon-envelope"></i>&nbsp;Envoyer à l'organisateur</button>
                            <button type="submit" ng-click="envoyerMsgParticipants()" class="btn btn-primary"><i class="glyphicon glyphicon-envelope"></i>&nbsp;Envoyer à tous les participants</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">Notifications</div>
            <div class="panel-body">
                <div>
                    <strong>fares</strong> : Ok, j'amène la deuxième !
                    <button type="submit" ng-click="supprimerNotif()" class="btn btn-danger btn-xs"><i class="glyphicon glyphicon-trash"></i></button>
                </div>
                <br/>
                <div>
                    <strong>axel</strong> : J'apporte une manette
                    <button type="submit" ng-click="supprimerNotif()" class="btn btn-danger btn-xs"><i class="glyphicon glyphicon-trash"></i></button>
                </div>
            </div>
        </div>

    </form>
</div>